<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>VUE 指令</title>
	<script src="js/vue.js" type="text/javascript"></script>
</head>

<body>
	<div>
		v-text					         设置标签中的文本<br/>
		v-html                           设置标签中的html<br/>
		
		v-if                                判断条件<br/>
		v-show                          判断表达式的值，true则显示，false则隐藏<br/>
		
		v-for                              循环<br/>
		v-on                              注册事件<br/>
	</div>
	
	<div id="app">
		<h3>文字：</h3>
		<p>v-text： <span v-text="name"></span></p>
		<p>v-html：<span v-html="html"></span></p>
		<p v-for="o in object">{{ o }}</p>
		<p v-for="(v,k,i) in object">属性名：{{ k }}，属性值：{{ v }}，下标值：{{ i }}</p>
		
		<h3>v-if 展现：</h3>
		<p v-if="object.age==17">object.age==17</p>
		<p v-else-if="object.age==18">object.age==18</p>
		<p v-else-if="object.age==20">object.age==20</p>
		<p v-else>else结果</p>
		
		<h3>v-show 展现：</h3>
		<p v-show="false">不展现</p>
		<p v-show="object.age>17">true展现</p>
		<p v-show="object.name.length==2">false隐藏</p>
		
		<h3>v-for 遍历数组：</h3>
		<ul><li v-for="h in hobbys">{{ h.name?h.name:h }}</li></ul>
		<ul><li v-for="(h,i) in hobbys">{{ h.name?h.name:h }}、{{i}}、{{ hobbys[i] }}</li></ul>
		
		<h3>v-on 注册事件：</h3>
		<p>
			<button v-on:click="click()">无参-单击</button>
			<button v-on:dblclick="click">无参-双击</button>
			<div v-on:mouseover="say('足球')" style="border:1px solid red; margin: 10px;">有参-移入</div>
			<div v-on:mouseout="say('乒乓球')" style="border:1px solid red; margin: 10px;">有参-移出</div>
		</p>
	</div>
</body>

<script type="text/javascript">
	var people = {
		name : "王强",
		age: 20,
		sex: "男"
	}

	// 创建一个 Vue 实例或 "ViewModel"
	// 它连接 View 与 Model
	var v = new Vue({
		el : '#app',
		data : {
			name: "应用名",
			age: 18,
			html: "<font style='color:red'>HTML文字</fond>",
			object: people,
			hobbys: ["男","女","未知", people]
		},
		methods:{
			click: function(){
				alert(1);
			},
			say: function( hobby ){
				alert(this.name+"的年龄："+this.age+"，爱好是："+hobby);
			}
		}
	});
</script>

</html>
